<template>
  <div class="w">
    <header>
      <div class="top">
        <div class="t">
          <div>
            <div class="img" v-if="store.state.deng == true">
              <img src="https://pic.616pic.com/ys_img/00/28/90/alsGMLa4wn.jpg" alt="">
            </div>
            <div class="img" v-else>
              <!-- <van-uploader v-model="fileList" multiple></van-uploader> -->
              <van-image round :src="store.state.userData[0].imgurl ? store.state.userData[0].imgurl : srcs " />
            </div>
          </div>
          <div class="txt">
            <h5>
              <span v-if="store.state.deng == true" @click="dianji">点击登录</span>
              <span v-else>{{ store.state.userData[0].username || store.state.userData[0].telephone }}</span>
            </h5>
            <p>
              <span v-if="store.state.deng == true">你还未登录，登录查看你的个性签名</span>
              <span v-else>{{ store.state.userData[0].sign || '你还没有个性签名~~~' }}</span>
            </p>
          </div>
        </div>
      </div>
      <div v-show="!store.state.deng" class="con">
        <ul>
          <li>
            <span>我的订单</span>
            <span class="span">查看全部 <i class="iconfont icon-xiangyoujiantou"></i></span>
          </li>
          <li>
            <span>想看的电影</span>
            <span class="span">查看全部 <i class="iconfont icon-xiangyoujiantou"></i></span>
          </li>
          <li>
            <span>看过的电影</span>
            <span class="span">查看全部 <i class="iconfont icon-xiangyoujiantou"></i></span>
          </li>
          <li @click="bian">
            <span class="spans">编辑资料</span>
          </li>
          <li @click="tui">
            <span class="spans">点击退出</span>
          </li>
        </ul>
      </div>
      <div class="divs" v-show="store.state.deng">
        <img :src="src" alt="">
      </div>
    </header>
  </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const src = ref()
const srcs = ref()

// const fileList:any = ref([
//   { url: store.state.userData[0].imgurl, isImage: true }
// ])

// 点击跳转到登录页
const dianji = () => {
  router.push('/login')
}

onMounted(() => {
  src.value = 'https://hbimg.huabanimg.com/7695323ad7524d5d0e485bc32d80185ee8a2e348fab8-YQKqCE_fw658'
  srcs.value = 'https://bpic.588ku.com/element_origin_min_pic/19/06/13/19d1ab0854f012fd254fce49f8729510.jpg'
})

// 点击编辑信息
const bian = () => {
  router.push('/edit')
}
// 点击退出
const tui = () => {
  localStorage.removeItem("user")
  localStorage.removeItem("deng")
  location.href = location.href + "#reloaded"
  location.reload()
}
</script>
  
<style scoped lang="scss">
.w {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  header {
    // flex: 1;
    width: 100%;

    .top {
      position: relative;
      width: 100%;
      height: 300px;
      box-sizing: border-box;
      background-color: #ff4c4c;
      padding: 30px 60px;

      .t {
        padding-top: 60px;
        box-sizing: border-box;
        width: 100%;
        height: 160px;
        display: flex;
        align-items: center;

        .img {
          width: 150px;
          height: 150px;
          background-color: beige;
          border-radius: 50%;
          overflow: hidden;

          >img {
            width: 100%;
          }

        }

        .txt {
          margin-left: 40px;
          width: 380px;
          height: 95px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          h5,
          p {
            margin: 0;
          }

          span {
            font-size: 25px;
            color: #ffffff;
            margin-top: 20px;
          }
        }
      }
    }

    .con {
      width: 100%;
      margin-top: 30px;

      >ul {
        width: 100%;
        margin-bottom: 120px;
        border-radius: 20px;

        >li {
          margin: auto;
          box-sizing: border-box;
          margin-bottom: 15px;
          padding: 0 20px;
          width: 100%;
          height: 100px;
          background-color: #ffffff;
          font-size: 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .span {
            color: #b7b7b7;
          }

          .icon-xiangyoujiantou {
            font-size: 15px;
          }
        }
      }
    }
  }
}

.divs {
  width: 100%;

  >img {
    width: 100%;
  }
}

.spans {
  text-align: center;
}
</style>
  